<script setup>
  import { onLoad } from '@dcloudio/uni-app'

  const { id } = defineProps({
    id: String
  })
  // 页面加载
  onLoad(() => {
    // wx.showModal({
    //   title: '温馨提示',
    //   content: '此交易是模拟支付，您并未付款，不会导致实际购买商品或服务',
    //   confirmText: '知道了',
    //   showCancel: false,
    // })
  })
</script>

<template>
  <scroll-view enable-back-to-top class="viewport" scroll-y @scrolltolower="onScrolltolower">
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status icon-checked">支付成功</view>
      <view class="buttons">
        <navigator hover-class="none" class="button navigator" url="/pages/index/index" open-type="switchTab">
          返回首页
        </navigator>
        <navigator hover-class="none" class="button navigator" :url="`/pagesOrder/detail/detail?id=${id}`"
          open-type="redirect">
          查看订单
        </navigator>
      </view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .viewport {
    background-color: #f7f7f8;
  }

  .overview {
    line-height: 1;
    padding: 50rpx 0;
    color: #fff;
    background-color: #27ba9b;

    .tips {
      width: 70%;
      font-size: 24rpx;
      text-align: center;
      line-height: 1.5;
      margin: 60rpx auto;
    }

    .status {
      font-size: 36rpx;
      font-weight: 500;
      text-align: center;
    }

    .status::before {
      display: block;
      font-size: 110rpx;
      margin-bottom: 20rpx;
    }

    .buttons {
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60rpx;
    }

    .button {
      text-align: center;
      margin: 0 10rpx;
      font-size: 28rpx;
      color: #fff;

      &:first-child {
        width: 200rpx;
        border-radius: 64rpx;
        border: 1rpx solid #fff;
      }
    }
  }
</style>
